<template>
	<div>
		<h2 class="mt10 mb5">{{ titleName }}信息</h2>
		<div class="good-card-box" v-if="detailData.goods_ls && detailData.goods_ls.length > 0">
			<div class="total-summary-box">
				<h2 class="mr20"> 商品 </h2>
				<div class="total-item">
					<span class="total-label">总数量</span>
					<span class="total-amount">{{ detailData.number }}</span>
				</div>
				<div class="total-divider"></div>
				<div class="total-item">
					<span class="total-label">已{{ titleName }}</span>
					<span class="total-quantity">{{ Number(detailData.number_inout).toFixed(0) }}</span>
				</div>
				<div class="total-divider"></div>
				<div class="total-item">
					<span class="total-label">待{{ titleName }}</span>
					<span class="total-quantity">{{ Number(detailData.number_not).toFixed(0) }}</span>
				</div>
			</div>
			<div style="padding: 0 12px;" v-for="(item, index) in detailData.goods_ls"
				:key="`goods-${item.id || index}`">
				<MarketGoodsCard :gdInfo="item" :isType="'kg'" :tabType="tabType" />
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, defineProps, defineEmits, getCurrentInstance, watch, computed, nextTick } from '@vue/composition-api'
import MarketGoodsCard from "@/components/commV2/marketGoodsCard/index.vue";

const props = defineProps({
	detailData: {
		type: Object,
		default: () => { }
	},
	titleName: {
		type: String,
		default: ''
	},
	tabType: {
		type: String,
		default: ''
	},
})
const emit = defineEmits(['handleTxtLs'])
const handleTxt = () => {
	emit('handleTxtLs')
}

onMounted(() => { })

defineExpose({})

</script>

<style lang="scss" scoped>
.good-card-box {
	box-sizing: border-box;
	overflow: hidden;
	border-radius: 8px;
	border: 1px solid #e2e8f0;

	.total-summary-box {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 6px 14px;
		background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
		border-bottom: 1px solid #e2e8f0;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	}

	.total-item {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.total-label {
		font-size: 14px;
		color: #64748b;
		font-weight: 500;
	}

	.total-amount {
		font-size: 18px;
		font-weight: 700;
		color: #e11d48;
		text-shadow: 0 1px 2px rgba(225, 29, 72, 0.1);
	}

	.total-quantity {
		font-size: 16px;
		font-weight: 600;
		color: #0f172a;
	}

	.total-divider {
		width: 1px;
		height: 24px;
		background-color: #cbd5e1;
		margin: 0 24px;
	}
}
</style>